<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>历史报价单</title>
    <link rel="stylesheet" href="/css/userweb/bootstrap.min.css">
    <link rel="stylesheet" href="/css/loading.css">
    <link rel="stylesheet" href="/css/userweb/common.css">
    <link rel="stylesheet" href="/css/userweb/purchase.css">
    <link rel="stylesheet" href="/css/userweb/myPagination.css">
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body id="overhidden">
{include file="html/Common/indexHeader"}
<div class="index_container">
    <!--删除-->
    <div class="model_box delete_confirm_box">
        <div class="model_content">
            <div class="close_model_box" onclick="closeDelete()">
                <img src="/image/userweb/slicesImg/close-btn.png" alt="">
            </div>
            <div class="model_info">
                <div class="model_info_title">
                    <div class="model_tip_title">
                        <div class="title_zh">确认删除该商家吗？</div>
                        <div class="title_en">confirm that you would like to delete this store?</div>
                    </div>
                </div>
                <div class="model_info_cont">
                    <div class="model_img">
                        <img  src="/image/userweb/shopImg/shop1.png" alt="">
                    </div>
                    <div class="model_name_box">
                        <div class="model_name">
                            <div class="title_zh">{{delData.name}}</div>
                            <!--<div class="title_en">name</div>-->
                        </div>
                        <div class="total_box">
                            <div class="title_zh">共计1个商家</div>
                            <div class="title_en">a total of 1 item</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="total_vat_box">
                <div class="total_title">
                    <div class="title_zh">总增值税</div>
                    <div class="title_en">total VAT</div>
                </div>
                <div class="total_sum">
                    ￡
                    <span  v-if="delData.tax" v-html="toFixed(delData.tax)"></span>
                    <span  v-else>0.00</span>
                </div>
            </div>
            <div class="total_vat_box">
                <div class="total_title">
                    <div class="title_zh">收取总额</div>
                    <div class="title_en">total charge</div>
                </div>
                <div class="total_sum" >￡<span v-html="toFixed(delData.total)"></span></div>
            </div>
            <div class="model_bottom_bar" v-on:click="delOrder()" onclick="closeDelete()">
                <div class="model_btn delete_sure_btn">确定(determine)</div>
            </div>
        </div>
    </div>
    <!--轮播-->
    <div class="banner">
        <ul id="on"></ul>
        <div class="banner_list"></div>
    </div>
    <div class="content" v-cloak>
        <!--商品分类-->
        <div class="my_show_container">
            <div class="my_show_box">
                <!--商品分类-->
                <div class="categories_list_box" v-on:mouseleave="closeClass()">
                    <div class="categories_left_box">
                        <div class="categories_list">
                            <div class="categories_list_title">
                                <div class="title_tag_bar"></div>
                                <div class="title_tag" @click="getTypeClassData('all')">
                                    <p>商品分类/categories</p>
                                </div>
                            </div>
                            <ul>
                                {volist name="list" id="vo"}
                                <li @click="getFirstTypeClassData($event)" id="{$vo.id}" onmousemove="changColor(this)">
                                    <a href="javascript:;" id="{$vo.id}" v-on:mouseenter="getBaseData($event)">
                                        <div class="list_title">
                                            <p>{$vo.name}/{$vo.name_english}</p>
                                        </div>
                                        <span class="list_arrow">
                                    <img src="/image/userweb/slicesImg/list-arrow.png" alt="">
                                </span>
                                    </a>
                                </li>
                                {/volist}
                            </ul>
                        </div>
                        <div class="product_num_box">
                            <div class="product_num_text">商品数量/Vegetables</div>
                            <div class="product_num_cont">
                                <div class="num_img" id="numReduce">
                                    <img src="/image/userweb/slicesImg/product-num-reduce.png" alt="">
                                </div>
                                <div class="product_num" id="num">1</div>
                                <div class="num_img" id="numAdd">
                                    <img src="/image/userweb/slicesImg/product-num-add.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="categories_content" v-show="type">
                        <div class="sub">
                            <dl v-for="item in items">
                                <dt>
                                    <a @click="getTypeClassData('type',item.id)">{{item.name}}/{{item.name_english}}</a>
                                </dt>
                                <dd >
                                    <a v-for="vo in item.list" @click="getTypeClassData('small',vo.id)">{{vo.name}}/{{item.name_english}}</a>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="my_show_content">
                    <div class="shop_tag">
                        <ul id="myTab">
                            <li class="nav-tabs active">
                                <a href="">
                                    <div class="title_zh">历史报价单</div>
                                    <div class="title_en">historical purchase</div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="my_show_area" v-loading="loading">
                        <div class="store_area" v-for="item in sds">
                            <div class="store_info_box">
                                <a :href="'/userweb/index/shopList.html?supplierId='+item.info.supplier_id">
                                    <div class="store_info_img">
                                        <img :src="url+item.info.image" alt="">
                                    </div>
                                    <div class="store_name_title">
                                        <div class="title_zh">{{item.info.supplier_name}}</div>
                                        <!--<div class="title_en">{{item.info.supplier_name_english}}</div>-->
                                    </div>
                                </a>
                                    <div id="openDelPage" v-bind:id="item.id" class="my_delete_img" @click="openDelPage($event)">
                                        <img  src="/image/userweb/slicesImg/delete-img.png" alt="">
                                    </div>
                            </div>
                            <div class="good_info_box" v-for="vl in item.info.goods">
                                <a v-bind:href="product_img+vl.product_id">
                                    <div class="good_info_img">
                                        <img v-bind:src="url+vl.product_image"  alt="">
                                    </div>
                                    <div class="info_list">
                                        <div class="info_top">
                                            <div class="good_info_name">
                                                <div class="title_zh">{{vl.product_name}}</div>
                                                <div class="title_en">{{vl.product_name_english}}</div>
                                            </div>
                                            <div class="info_tit_right">
                                                <div class="info_tit">
                                                    <div class="title_zh">总增值税</div>
                                                    <div class="title_en">total VAT</div>
                                                </div>
                                                <div class="info_price" v-if="vl.is_include_tax===1">
                                                    <em>￡<span></span></em>
                                                    <span>0.00</span>
                                                </div>
                                                <div class="info_price " v-else-if="vl.is_include_tax===0">
                                                    <em>￡<span v-html="toFixed(vl.tax)"></span></em>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="info_bottom">
                                            <div class="spec_info">
                                                <div class="product_num">{{vl.specification_name}}</div>
                                                <div class="product_num_number">×{{vl.num}}</div>
                                            </div>
                                            <!--<div class="spec_info">
                                                <span>{{vl.specification_name}}</span>
                                                <em>{{vl.specification_count}}</em>
                                            </div>-->
                                            <div class="info_tit_right">
                                                <div class="info_tit">
                                                    <div class="title_zh">收取总额</div>
                                                    <div class="title_en">total charge</div>
                                                </div>
                                                <div class="info_price">
                                                    <em>￡</em>
                                                    <span v-html="toFixed(vl.price)"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <!--分页-->
                        <div class="pagination_box" v-html="html"></div>
                        <div id="noData"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="slogan">
    <div class="slogan_title">
        <p>让我们的生活有更好的选择</p>
    </div>
    <div class="sub_slogan_title">
        <p>Let our lives have a better choice.</p>
    </div>
</div>
{include file="html/Common/indexFooter"}
<!--<div id="hisUserId" style="display: none">{$user_id}</div>-->
</body>
<script src="/js/userweb/jquery.min.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/vue-resource.js"></script>
<script src="/js/loading.js"></script>
<script src="/js/layer.js"></script>
<script src="/js/userweb/common.js"></script>
<script>
    $(function() {
        //制保留2位小数，如：2，会在2后面补上00.即2.00
        function toDecimal2(x) {
            var f = parseFloat(x);
            if (isNaN(f)) {
                return false;
            }
            var f = Math.round(x*100)/100;
            var s = f.toString();
            var rs = s.indexOf('.');
            if (rs < 0) {
                rs = s.length;
                s += '.';
            }
            while (s.length <= rs + 2) {
                s += '0';
            }
            return s;
        }
        validToken(); //验证tonken.
        bannerInit();
        $("#purchase").addClass("active");
        $("#purchase").siblings().removeClass("active");
        $("#numReduce").click(function () {
            var num = $("#num").html();
            var newNum = parseInt(num)-1;
            if(num==1){
                $("#num").html(1);
            }else {
                $("#num").html(newNum);
            }
        })
        $("#numAdd").click(function () {
            var num = $("#num").html();
            var newNum = parseInt(num)+1;
            $("#num").html(newNum);
        })
    });
    function closeDelete() {
        $('.delete_confirm_box').fadeOut(300);
        $('#overhidden').css('overflow','inherit');
    }
    var app = new Vue({
        el: ".index_container",
        data: {
            user_id:'',
            user_name:'',
            city:'',
            web_token:'',
            items: [],
            sds: [],
            html: '',
            searchs: {user_id : '',cate_id : '',type_id : '',small_type_id : '',num:'',page:1},
            lookIn: {pId : ''},
            order: {order_id : ''},
            page: '',
            tax:'',
            type:false,
            maxPage:'',
            product_img:"/userweb/index/productInfo.html?productId=",
            url:oss_url,
            delData:{id:'',name:'',total:'',tax:''},
            nodata:'',
            loading:true
        },
        methods: {
            req: function () {
                var url = '__APP__/api/Purchase/getClass';
                this.$http.post(url,this.lookIn, {
                    emulateJSON: true
                }).then(function (res) {
                    this.items = res.body['data'];
                }, function (res) {

                });
            },
            atd: function(){
                this.loading = true;
                this.searchs.num = $('#num').text();
                var url = '__APP__/api/Purchase/historyListWeb';
                this.$http.post(url,this.searchs, {
                    emulateJSON: true
                }).then(function (res) {
                    if(0 == res.body['data'].length){
                        $('#noData').html(this.nodata);
                        this.html = '';
                        this.sds = '';
                        this.tax = '';
                    }
                    else{
                        $('#noData').html("");
                        this.html = res.body['html'];
                        this.sds = res.body['data'];
                        this.tax = res.body['tax'];
                    }
                    this.loading = false;
                }, function (res) {
                });
            },
            getBaseData: function(event){
                this.lookIn.pId = event.currentTarget.id;
                this.req();
                this.type = true;
            },
            getTypeClassData: function(str,id){
                if('type' == str){
                    this.searchs.small_type_id = '';
                    this.searchs.cate_id = '';
                    this.searchs.type_id = id;
                }
                if('small' == str){
                    this.searchs.type_id = '';
                    this.searchs.cate_id = '';
                    this.searchs.small_type_id = id;
                }
                if('all' == str){
                    this.searchs.type_id = id;
                    this.searchs.small_type_id = '';
                    this.searchs.cate_id = '';
                }
                this.searchs.num = '';
                this.type = false;
                this.atd();
            },
            getFirstTypeClassData:function(event){
                this.searchs.cate_id = event.currentTarget.id;
                this.type = false;
                this.searchs.type_id = '';
                this.searchs.small_type_id = '';
                this.searchs.num = '';
                this.atd();
            },

            upPage:function(){
                this.searchs.page--;
                if(this.searchs.page < 1){
                    this.searchs.page = 1;
                }
                this.req();
            },
            nextPage:function(){
                this.searchs.page++;
                if(this.searchs.page > this.maxPage){
                    this.searchs.page = this.maxPage;
                }
                this.req();
            },
            openDelPage:function(event){
                var id = event.currentTarget.id
                $.each(this.sds,function(index,domEle){
                    if(domEle.id == id){
                        app.delData.id = domEle.id;
                        app.delData.name = domEle['info'].supplier_name;
                        app.delData.tax = domEle['order_tax'];
                        app.delData.total = domEle['total'];
                    }
                })
                this.order.order_id = id;
                $('.delete_confirm_box').css('display','block');
                $('#overhidden').css('overflow','hidden');
            },
            delOrder:function(){
                var url = '__APP__/api/Order/delOrder';
                this.$http.post(url,this.order,{
                    emulateJSON: true
                }).then(function (res) {
                    this.atd()
                }, function (res) {
                    console.log(res)
               });
            },
            loadHistoryPurchase:function(){
                window.location.href="/userweb/index/historyPurchase";
            },
            closeClass:function(){
//                $('.categories_list').find('li').children('a').removeClass('active');
//                $('.categories_list').find('li').find('img').attr('src',"/image/userweb/slicesImg/list-arrow.png");
                this.type = false;
            },
            toFixed:function(num){
                if(num == ""){
                    return '--';
                }else{
                    var result = num.substring(0,num.indexOf(".")+3);
                    return result;
                }
            }
        },
        mounted: function () {
            this.nodata += '<div class="my_no-data">';
            this.nodata += '<div class="no_data_tip">';
            this.nodata += '<img src="/image/userweb/slicesImg/no-data.png" alt="">';
            this.nodata += '<div class="no-data-text">';
            this.nodata += '<div class="title_zh">暂无数据</div>';
            this.nodata += '<div class="title_en">No data</div>';
            this.nodata += '</div>';
            this.nodata += '</div>';
            this.nodata += '</div>';
            this.user_id        = localStorage.getItem('user_id');
            this.user_name      = localStorage.getItem('user_name');
            this.city           = localStorage.getItem('city');
            this.web_token      = localStorage.getItem('web_token');
            if (!this.user_id ){
                window.location.href = "/userweb/index/login";
            }
            this.searchs.user_id = localStorage.getItem('user_id');
            this.req();
            this.atd();
        }
    });
    function AjaxPage(page) {
        app.searchs.page = page;
        app.atd();
    }
    function changColor(_this) {
        $(_this).find('a').addClass('active');
        $(_this).siblings().find('a').removeClass('active');
        $(_this).find('a').find('span').find('img').attr('src',"/image/userweb/slicesImg/list-arrow-change.png");
        $(_this).siblings().find('a').find('span').find('img').attr('src',"/image/userweb/slicesImg/list-arrow.png");
    }
</script>
</html>